<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="./js/jquery-3.6.0.min.js" type="text/javascript"></script>
        <style>
            .baseClass{background-color: #DDD;}
            .focusClass{background-color: #FFF;border:2px dotted #FF0000;}
            .inverseColor{color:#fff;background-color: #000;}
        </style>
    </head>
    <body>
        <img src="./img/1.jpg"><hr />
        <input type="button" value="放大图片" onclick="enlargeImage()"/>
        <input type="button" value="缩小图片" onclick="lessenImage()"/>
        <script type="text/javascript">
        function enlargeImage(){
            $("img").css({
                width:function(index,value){
                    return parseFloat(value)*1.1;
                },
                height:function(index,value){
                    return parseFloat(value)*1.1;
                }
            });
        }
        function lessenImage(){
            $("img").css({
                width:function(index,value){
                    return parseFloat(value)*0.9;
                },
                height:function(index,value){
                    return parseFloat(value)*0.9;
                }
            });
        }
        </script>
    </body>
</html>